<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <!-- 引入jQuery -->
    <script src="/static/jquery/jquery.min.js"></script>
    <!-- Bootstrap CSS -->
    <link href="/static/bootstrap/bootstrap.min.css" rel="stylesheet">

    <!-- 引入Vue.js -->
    <script src="/static/vue/vue.min.js"></script>
    
    <style>
        /* 顶部导航栏 */
        .top-nav {
            width: 100%;
            height: 60px; /* 导航栏高度 */
            background-color: #f8f9fa;
            padding: 10px 20px;
            position: fixed; /* 固定定位 */
            top: 0;
            left: 0;
            display: flex; /* 水平排列 */
            gap: 10px; /* 导航项之间的间距 */
            z-index: 1000; /* 确保导航栏在最上层 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
        }
        /* 主内容区域 */
        .main-content {
            margin-top: 60px; /* 与顶部导航栏高度一致 */
            height: calc(100vh - 60px); /* 高度减去导航栏高度 */
            padding: 20px;
        }

        /* iframe 占满父容器高度 */
        iframe {
            width: 100%;
            height: 100%; /* 占满父容器高度 */
            border: 1px solid #ddd;
        }

        /* 导航栏卡片样式 */
        .nav-card {
            height: 40px; /* 卡片高度 */
            display: flex;
            align-items: center; /* 内容垂直居中 */
            justify-content: center; /* 内容水平居中 */
            padding: 0 20px; /* 内边距 */
            cursor: pointer; /* 鼠标悬停变成小手 */
            transition: background-color 0.3s ease, transform 0.2s ease; /* 背景色和缩放过渡效果 */
            border-radius: 4px; /* 圆角 */
            position: relative; /* 为下拉列表定位 */
        }
        .nav-card:hover {
            background-color: #e9ecef; /* 鼠标悬停背景色 */
            transform: scale(1.05); /* 鼠标悬停时轻微放大 */
        }
        .nav-card.active {
            background-color: #0d6efd; /* 选中状态背景色 */
            color: white; /* 选中状态文字颜色 */
        }

        /* 下拉列表样式 */
        .dropdown-content {
            display: none; /* 默认隐藏 */
            position: absolute;
            top: 100%; /* 显示在导航项下方 */
            left: 0;
            background-color: #fff;
            min-width: 160px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            z-index: 1001; /* 确保下拉列表在最上层 */
        }
        .dropdown-content div {
            padding: 10px 20px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .dropdown-content div:hover {
            background-color: #f1f1f1; /* 鼠标悬停背景色 */
        }
        .dropdown:hover .dropdown-content {
            display: block; /* 鼠标悬停时显示下拉列表 */
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 顶部导航栏 -->
        <div class="top-nav">
            <div 
                class="nav-card" 
                :class="{ active: currentPage === 'home' }"
                @click="changePage('home')"
            >
                首页
            </div>
            <div 
                class="nav-card" 
                :class="{ active: currentPage === 'class_attendance' }"
                @click="changePage('class_attendance')"
            >
                班级考勤
            </div>
            <div 
                class="nav-card dropdown" 
                :class="{ active: currentPage === 'services' }"
                @mouseenter="showDropdown = true"
                @mouseleave="showDropdown = false"
            >
                考勤信息
                <!-- 下拉列表 -->
                <div class="dropdown-content" v-if="showDropdown">
                    <div @click="changePage('class_attendance_info')">班级考勤信息</div>
                    <div @click="changePage('student_attendance_info')">学生考勤信息</div>
                </div>
            </div>
            <div 
                class="nav-card" 
                :class="{ active: currentPage === 'contact' }"
                @click="changePage('contact')"
            >
                班级留言板
            </div>
        </div>

        <!-- 主内容区域 -->
        <div class="main-content">
            <!-- 嵌入网页 -->
            <iframe 
                :src="iframeSrc" 
                width="100%" 
                frameborder="0" 
                style="border: 1px solid #ddd;"
            ></iframe>
        </div>
    </div>

    
  
  <!-- 引入Vue.js -->
  <script src="/static/vue/vue.min.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
    <script>
        new Vue({
            el: '#app',
            data: {
                currentPage: 'home', // 当前页面
                iframeSrc: '', // iframe 的 src 属性
                showDropdown: false // 控制下拉列表的显示
            },
            created() {
                // 初始化页面
                this.changePage('home');
            },
            methods: {
                // 切换页面
                changePage(page) {
                    this.currentPage = page;
                    switch (page) {
                        case 'home':
                            this.iframeSrc = '/notice/notice.html'; // 设置首页的 iframe URL
                            break;
                        case 'class_attendance':
                            this.iframeSrc = '/ClassManage/CLSManage.html'; // 设置关于页的 iframe URL
                            break;
                        case 'class_attendance_info':
                            this.iframeSrc = '/attendance/class.html'; // 设置班级考勤信息的 iframe URL
                            break;
                        case 'student_attendance_info':
                            this.iframeSrc = '/attendance/student.html'; // 设置学生考勤信息的 iframe URL
                            break;
                        case 'contact':
                            this.iframeSrc = '/Suggestion/suggestion.html'; // 设置联系页的 iframe URL
                            break;
                    }
                    this.showDropdown = false; // 切换页面后关闭下拉列表
                },
            }
        });
    </script>
</body>
</html>